<template>
  <div class="margin-container-list">
    <div class="diy-phone">
      <div class="phone-head"></div>
      <div class="phone-body">
        <div class="phone-title" id="page">标题</div>
        <div class="phone-main ui-sortable">
            <template v-for="item in listDetails">
              <!-- 文本预览 -->
              <!-- {{item}} -->
              <template v-if="item.authorType === 11">
                <div class="drag-box" :id="'text-'+item.sortNo" :key="'text-'+index">
                  <div class="drag selected">
                    <div class="diy-content" :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px '+ item.sideMargin+'px;'">
                      <div :class="item.shareArticleTextDTO.textSize+' '+item.shareArticleTextDTO.textAlign+' '+item.shareArticleTextDTO.textColor+' '+item.shareArticleTextDTO.textShape+' '+item.shareArticleTextDTO.textColor">{{item.shareArticleTextDTO.content}}</div>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 图片预览 -->
              <template v-else-if="item.authorType === 12">
                <div class="drag-box" :id="'picture-'+item.sortNo" :key="'picture-'+index">
                  <div class="drag selected">
                    <div class="diy-content" :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px 0px;'">
                      <img v-if="item.shareArticlePictureDTO.imgUrl" :src="item.shareArticlePictureDTO.imgUrl" height="200px" :style="'width: 100%; padding: 0px '+ item.sideMargin+'px;'">
                    </div>
                  </div>
                </div>
              </template>
              <!-- 商品预览 -->
              <template v-else-if="item.authorType === 13">
                <div class="drag-box" :id="'goods-'+item.sortNo" :key="'goods-'+index">
                  <div class="drag selected">
                    <template v-for="(itemGoods, index) in item.shareArticleGoodsDTOS">
                      <div class="diy-content diy-goods" :class="goodsListShow ? 'width-per-100' : 'width-per-50'" :key="index"
                           :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px 0px;'">
                        <div style="width: 100%; height: 145px; background: #fe8096;">
                          <img :src="itemGoods.imgUrl" class="width-68 height-68 border-radius-5">
                        </div>
                        <p>{{itemGoods.title}}</p>
                        <div class="flex v-align-c price-bar">
                          <span class="flex-item">￥{{ itemGoods.price }}</span>
                          <label>购买</label>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
              <!-- 视频预览 -->
              <template v-else-if="item.authorType === 16">
                <div class="drag-box" :id="'video-'+item.sortNo" :key="'video-'+index">
                  <div class="drag selected">
                    <div class="diy-content" :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px 0px;'">
                      <video controls="controls" autoplay="autoplay">
                        <source v-if="item.shareArticleVideoDTO.videoUrl" :src="item.shareArticleVideoDTO.videoUrl" type="video/mp4">
                        Your browser does not support the video tag.
                      </video>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 音频预览 -->
              <template v-else-if="item.authorType === 17">
                <div class="drag-box" :id="'audio-'+item.sortNo" :key="'audio-'+index">
                  <div class="drag selected">
                    <div class="diy-content" :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px 0px;'">
                      <audio src="http://www.w3school.com.cn/i/horse.ogg" controls="controls">
                        Your browser does not support the audio element.
                      </audio>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 辅助空白预览组件 -->
              <template v-else-if="item.authorType === 10">
                <div class="drag-box" :id="'space-'+item.sortNo" :key="'space-'+index">
                  <div class="drag selected">
                    <div class="diy-content"></div>
                  </div>
                </div>
              </template>
            </template>
        </div>
      </div>
      <div class="phone-foot"></div>
    </div>
    <div slot="footer" class="margin-container-list radius-container dialog-footer">
      <el-button @click="that.$router.go(-1)">返回</el-button>
    </div>
  </div>
</template>

<style scoped>
  .with-div-50 {
    width: 60%;
    height: 80%;
    float: left;
  }
  .with-div-30 {
    width: 30%;
    height: 80%;
    float: left;
  }
</style>

<script>
  import { getNameByPath } from '@/utils/get-name-by-path' // 不要删除，根据URL获取文件名
  import { getShareArticle } from '@/api/content/distributeArticle'
  import draggable from 'vuedraggable'
  export default {
    name: getNameByPath(),
    components: {
      draggable
    },
    data() {
      return {
        that: this,
        listDetails: [],
        contentId: ''
      }
    },
    // 过滤器
    filters: {
    },
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.contentId) {
        this.contentId = queryParams.contentId
      }
      this.initShareArticle()
    },
    methods: {
      initShareArticle() {
        if (this.contentId) {
          getShareArticle(this.contentId).then(response => {
            if (response.isError) return
            this.listDetails = response.data
          })
        }
      }
    },
    mounted() {

    }
  }
</script>
